<template>
    <div class="banxin">
       <!-- <Breadcrumb :breadArr="breadArr" /> -->
       <!-- 面包屑 -->   
       <ul class="bread">
         <li 
           @click="$router.push('/')" 
           :class="{'active': $route.path === '/home' || $route.path === '/'}"
         >首页 <i>/</i> 
         </li>
          <li class="active">个人中心</li>
       </ul>
   
       <main class="tanxin">
           <aside>
               <img src="../assets/images/userImg.png" alt="" class="avatar">
               <div class="userInfo">
                   <span>游客</span>
                   <a href="#" @click="logout">【退出】</a>
               </div>
               <div class="title">
                   <img src="../assets/images/person/transaction.png" alt=""> 交易管理
               </div>
               <ul>
                   <li @click="$router.push('/user/center')" :class="{'active': $route.path.includes('center')}">个人中心</li>
                   <li @click="$router.push('/user/order')" :class="{'active': $route.path.includes('order')}">我的订单</li>
                   <li @click="$router.push('/user/cart')" :class="{'active': $route.path.includes('cart')}">购物车</li>
                   <li @click="asideActive = 4" :class="{'active': asideActive===4}">消息通知 </li>
                   <li @click="asideActive = 5" :class="{'active': asideActive===5}">积分明细</li>
                   <li @click="asideActive = 6" :class="{'active': asideActive===6}">积分攻略</li>
               </ul>
                <div class="title">
                   <img src="../assets/images/person/information.png" alt=""> 个人信息管理
               </div>
                <ul>
                   <li @click="asideActive = 7" :class="{'active': asideActive===7}">地址管理</li>
                   <li @click="$router.push('/user/safe')" :class="{'active': $route.path.includes('safe')}">账号安全</li>
               </ul>
           </aside>
           <!-- 显示动态变化的路由的对应组件 -->
           <article>
               <router-view @updateKeyFn= "$emit('updateKeyFn')"></router-view>
           </article>
       </main>
     </div>
   </template>
   
   <script>
   // import Breadcrumb from "@/components/Breadcrumb.vue";
   export default {
   data() {
       return {
           // 面包屑数组
           // breadArr : ['首页','个人中心'],
           asideActive: 0,
       };
     },
     // components: {
     //   Breadcrumb,
     // },
     methods: {
       // 退出登录
       logout() {
         // 删除token
         localStorage.clear();
         // 提示
         let obj = { content:"你已经退出登录,即将返回首页...", icon:"success"};
         this.$store.dispatch("AsyncToast", obj);
         // 触发中的header中的
         // 跳去首页的updateKeyFn
         this.$emit("updateKeyFn");
         setTimeout(() => {
             this.$router.push("/");
         }, 2000)
       }
     },
   }
   </script>
    
   <style lang = "less" scoped>
   @import "../assets/base.less";
   /* 面包屑 */
   .bread {
     color: #999999;
     display: flex;
     margin-top: 60px;
     margin-bottom: 20px;
     li {
       font-size: 16px;
       cursor: pointer;
       i {
           margin-right: 6px;
       }
       &.active{
           font-weight: bold;
           color: #000;
       }
     }
   }
   /*  */
   main {
     border-top: 2px solid #ececec;
     padding-bottom: 50px;
     padding-top: 20px;
     min-height: 740px;
     aside {
       width: 200px;
       background: #e7e7e7;
       margin-right: 60px;
       .avatar {
         width: 100px;
         height: 100px;
         display: block;
         margin: 30px auto 19px;
       }
       .userInfo {
         text-align: center;
         margin-bottom: 43px;
         a {
           text-decoration: none;
           color: @blue;
         }
       }
       .title {
         display: flex;
         align-items: center;
         padding-left: 18px;
         margin-bottom: 17px;
         margin-top: 40px;
         font-weight: bold;
         img {
           margin-right: 6px;
         }
       }
       ul {
         padding-left: 20px;
         li {
           margin-bottom: 18px;
           color: #666666;
           cursor: pointer;
           &.active {
             border-left: 2px solid @blue;
             padding-left: 10px;
             color: @blue;
             font-weight: bold;
           }
         }
       }
     }
     article{
       flex: 1;
     }
   }
   </style>